<template>
    <div class="video-list">
        <div class="video-item" @click="clickVideoItemEvent(item.videoId, index)" v-for="(item, index) in videoList" :key="item.videoId" >
            <img class="cover-img" :src="item.coverUrl">
        </div>
    </div>
</template>

<script setup>
import router from '@/router';

const props = defineProps({
    videoList: Array,
    routePath: String,
})

function clickVideoItemEvent(videoId, index){
    router.push({name:props.routePath})
}
</script>

<style scoped>
.video-list {

    column-count: 4;
    column-gap: 10px;
}

.video-item {
    margin-right: 20px;
    margin-bottom: 20px;

    cursor: pointer;

}



.video-item .cover-img {
    width: 100%;
    border-radius: 8px;

}
</style>